<template>
	<view class="input-select">
		<view class="label">
			<text :class="{required: required}">{{label}}</text>
			<text>:</text>
		</view>
		<picker :mode="mode" class="select-picker" @change="onChange" v-model="selectIdx" :range="range">
			<view class="picker-text">
				{{selectIdx>-1?range[selectIdx]:'请选择'}}
			</view>
			<image class="arrow-down" src="@/common/imgs/arrow-down.png"></image>
		</picker>
	</view>
</template>

<script>
	export default {
		name:"input-box",
		props: {
			mode: {
				type: String,
				default: 'selector'
			},
			label: {
				type: String
			},
			required: {
				type: Boolean,
				default: false
			},
			value: {
				type: String
			},
			range: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			value: function(val){
				if(val) {
					const index = this.range.indexOf(val)
					if(index !== -1) {
						this.selectIdx = index
					}
				}
			}
		},
		data() {
			return {
				selectIdx: -1
			};
		},
		
		methods: {
			onChange(e) {
				this.selectIdx = e.detail.value
				this.$emit('update:value', this.range[this.selectIdx])
			}
		}
	}
</script>

<style lang="less">
@import url('@/common/less/vars.less');

.input-select{
	color: @text-color;
	font-size: @main-font-size;
	margin-bottom: 14px;
	
	&>.label{
		margin-bottom: 6px;
	}
	
	&>.label >text:first-child.required::after{
		content: '*';
		color: @theme-color;
		font-size: @main-font-size;
	}
	
	&>.label >text:nth-child(2) {
		margin-left: 7.03rpx;
	}
	
	.select-picker{
		width: 100%;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: @theme-color;
		color: #fff;
		position: relative;
		.picker-text{
			margin-left: 16.4rpx;
		}
		
		.arrow-down{
			width: 29.29rpx;
			height: 15.23rpx;
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	

}
</style>